<template>
    <div class="test_open_cupboard">
        <top-timer :back="false" :second="240"/>
        <p class="font_M font_40 col_333 title center">箱门已开,请放入要洗涤的衣物</p>
        <p class="font_30 col_777 tips center">放完衣物后，请关闭箱门</p>
        <div class="frame font_28 center">
            <div class="row">
                <div class="t80_240" :class="openDoorNum === 'g1'?'is_open':''" @click="openBox('g1')">g1</div>
                <div class="t80_240" :class="openDoorNum === 'g2'?'is_open':''" @click="openBox('g2')">g2</div>
                <div class="t80_240" :class="openDoorNum === 'g3'?'is_open':''" @click="openBox('g3')">g3</div>
                <div class="t160_240 font_28">显示屏</div>
                <div class="t80_240" :class="openDoorNum === 'g4'?'is_open':''" @click="openBox('g4')">g4</div>
                <div class="t160_240">
                    <div class="t160_80" :class="openDoorNum === 'd1'?'is_open':''"  @click="openBox('d1')">d1</div>
                    <div class="t160_80" :class="openDoorNum === 'd2'?'is_open':''"  @click="openBox('d2')">d2</div>
                    <div class="t160_80" :class="openDoorNum === 'd3'?'is_open':''"  @click="openBox('d3')">d3</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g5'?'is_open':''"  @click="openBox('g5')">g5</div>
                <div class="t80_240" :class="openDoorNum === 'g6'?'is_open':''"  @click="openBox('g6')">g6</div>
                <div class="t80_240" :class="openDoorNum === 'g7'?'is_open':''"  @click="openBox('g7')">g7</div>
                <div class="t80_240" :class="openDoorNum === 'g8'?'is_open':''"  @click="openBox('g8')">g8</div>
            </div>
            <div class="row">
                <div class="t80_240" :class="openDoorNum === 'g9'?'is_open':''"  @click="openBox('g9')">g9</div>
                <div class="t80_240" :class="openDoorNum === 'g10'?'is_open':''"  @click="openBox('g10')">g10</div>
                <div class="t80_240" :class="openDoorNum === 'g11'?'is_open':''"  @click="openBox('g11')">g11</div>
                <div class="t160_240">
                    <div class="t160_80 font_28">扫码处</div>
                    <div class="t160_160" :class="openDoorNum === 'b1'?'is_open':''"  @click="openBox('b1')">b1</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g12'?'is_open':''"  @click="openBox('g12')">g12</div>
                <div class="t160_240">
                    <div class="t160_80" :class="openDoorNum === 'd4'?'is_open':''"  @click="openBox('d4')">d4</div>
                    <div class="t160_80" :class="openDoorNum === 'd5'?'is_open':''"  @click="openBox('d5')">d5</div>
                    <div class="t160_80" :class="openDoorNum === 'd6'?'is_open':''"  @click="openBox('d6')">d6</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g13'?'is_open':''"  @click="openBox('g13')">g13</div>
                <div class="t80_240" :class="openDoorNum === 'g14'?'is_open':''"  @click="openBox('g14')">g14</div>
                <div class="t80_240" :class="openDoorNum === 'g15'?'is_open':''"  @click="openBox('g15')">g15</div>
                <div class="t80_240" :class="openDoorNum === 'g16'?'is_open':''"  @click="openBox('g16')">g16</div>
            </div>
            <div class="row">
                <div class="t80_80" :class="openDoorNum === 'x1'?'is_open':''"  @click="openBox('x1')">x1</div>
                <div class="t80_80" :class="openDoorNum === 'x2'?'is_open':''"  @click="openBox('x2')">x2</div>
                <div class="t80_80" :class="openDoorNum === 'x3'?'is_open':''"  @click="openBox('x3')">x3</div>
                <div class="t80_80" :class="openDoorNum === 'x4'?'is_open':''"  @click="openBox('x4')">x4</div>
                <div class="t80_80" :class="openDoorNum === 'x5'?'is_open':''"  @click="openBox('x5')">x5</div>
                <div class="t80_80" :class="openDoorNum === 'x6'?'is_open':''"  @click="openBox('x6')">x6</div>
                <div class="t160_80" :class="openDoorNum === 'd7'?'is_open':''"  @click="openBox('d7')">d7</div>
                <div class="t80_80" :class="openDoorNum === 'x7'?'is_open':''"  @click="openBox('x7')">x7</div>
                <div class="t80_80" :class="openDoorNum === 'x8'?'is_open':''"  @click="openBox('x8')">x8</div>
                <div class="t80_80" :class="openDoorNum === 'x9'?'is_open':''"  @click="openBox('x9')">x9</div>
                <div class="t80_80" :class="openDoorNum === 'x10'?'is_open':''"  @click="openBox('x10')">x10</div>
            </div>
        </div>
        <top-tips/>
    </div>
</template>

<script>
    export default {
        name: "test-open-cupboard",
        data () {
            return {
                openDoorNum: '',
                queryInterval: null
            }
        },
        methods: {
            openBox(boxCode){
                let success = (res) => {
                    alert("success")
                }
                let error = (res) => {
                    alert('关箱失败' + res)
                }
                let boxMac = this.$boxConfig[boxCode]
                window.cordova.plugins.CabinetPlugin.sendQueryCommand(boxMac, success, error)
            }
        }
    }
</script>

<style lang="scss">
    .test_open_cupboard {
        .title {
            margin: 0.40rem 0 0.20rem;
        }
        .tips {
            margin-bottom: 0.40rem;
        }
        .frame {
            margin: 0 0.60rem;
            overflow: hidden;
            .row {
                overflow: hidden;
                &:first-of-type {
                    > div {
                        border-top: 0.02rem solid #979797;
                    }
                    > div:first-of-type {
                        border-top-left-radius: 0.16rem;
                    }
                    > div:last-of-type {
                        border-top-right-radius: 0.16rem;
                    }
                }
                &:last-of-type {
                    > div:first-of-type {
                        border-bottom-left-radius: 0.16rem;
                    }
                    > div:last-of-type {
                        border-bottom-right-radius: 0.16rem;
                    }
                }
                div {
                    float: left;
                    display: inline-block;
                    border-bottom: 0.02rem solid #979797;
                    border-right: 0.02rem solid #979797;
                }
                > div:first-of-type {
                    border-left: 0.02rem solid #979797;
                }
            }
        }
        .t80_240 {
            width: 0.80rem;
            height: 2.40rem;
        }
        .t160_240 {
            width: 1.60rem;
            height: 2.40rem;
        }
        .t160_80 {
            width: 1.60rem;
            height: 0.80rem;
        }
        .t160_160 {
            width: 1.60rem;
            height: 1.60rem;
        }
        .t80_80 {
            width: 0.80rem;
            height: 0.80rem;
        }
        .is_open {
            background-color: #d9ebfe;
        }
    }
</style>